<div bsModal #createOrEditModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static' }">
    <div class="modal-dialog modal-xl" style="max-width: 52%!important;">
        <div class="modal-content">
            <form #editForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title"><span>物料日志</span></h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs  m-tabs-line" role="tablist">
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" data-toggle="tab" href="javascript:;" role="tab"
                                [ngClass]="{ active: tab === 1 }" (click)="tabChange(1)">入库</a>
                        </li>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" data-toggle="tab" href="javascript:;" role="tab"
                                [ngClass]="{ active: tab === 2 }" (click)="tabChange(2)">出库</a>
                        </li>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" data-toggle="tab" href="javascript:;" role="tab"
                                [ngClass]="{ active: tab === 3 }" (click)="tabChange(3)">退库</a>
                        </li>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" data-toggle="tab" href="javascript:;" role="tab"
                                [ngClass]="{ active: tab === 4 }" (click)="tabChange(4)">返回物流</a>
                        </li>
                    </ul>
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row align-items-center m--margin-bottom-10">
                                <div class="col-xl-12">
                                    <div class="form-group m-form__group align-items-center">
                                        <div class="input-group">
                                            <input [(ngModel)]="filterText" name="filterText" autofocus
                                                class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                                type="text" />
                                            <span class="input-group-btn">
                                                <button (click)="getLogs()" class="btn btn-primary" type="submit">
                                                    <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                                <div class="col-sm-12 text-right">
                                    <button class="btn btn-metal" (click)="getLogs()">
                                        <i class="fa fa-refresh"></i> {{ l('Refresh') }}
                                    </button>
                                </div>
                            </div>
                            <div class="row margin-bottom-10"></div>
                        </div>
                    </form>

                    <div class="row align-items-center">
                        <!-- <Primeng-TurboTable-Start> -->
                        <div class="primeng-datatable-container" [busyIf]="primengTableLogHelper.isLoading">
                            <p-table #logDataTable (onLazyLoad)="getLogs($event)"
                                [value]="primengTableLogHelper.records" rows="10" [paginator]="false" [lazy]="true"
                                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableLogHelper.isResponsive"
                                [resizableColumns]="primengTableLogHelper.resizableColumns">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 170px;">任务号</th>
                                        <th style="width: 150px;">图号</th>
                                        <th style="width: 120px;">材料名称</th>
                                        <th style="width: 120px;">数量</th>
                                        <th style="width: 150px;">时间</th>
                                        <th style="width: 120px;">人员</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit">
                                    <tr>
                                        <th style="width: 170px;">{{ record.taskCode }}</th>
                                        <th style="width: 150px;">{{ record.drawingCode }}</th>
                                        <th style="width: 120px;">{{ record.materialName }}</th>
                                        <th style="width: 120px;">{{ record.quantity }}</th>
                                        <th style="width: 150px;">{{ record.creationTime | momentFormat: 'YYYY-MM-DD' }}
                                        </th>
                                        <th style="width: 120px;">{{ record.creatorUserName }}</th>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-no-data" *ngIf="primengTableLogHelper.totalRecordsCount == 0">
                                {{ l('NoData') }}</div>
                            <div class="primeng-paging-container">
                                <p-paginator #logPaginator rows="{{primengTableLogHelper.defaultRecordsCountPerPage}}"
                                    (onPageChange)="getLogs($event)"
                                    [totalRecords]="primengTableLogHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableLogHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count"> 共计：{{ primengTableLogHelper.totalRecordsCount }}
                                </span>
                            </div>
                        </div>
                        <!-- <Primeng-TurboTable-End> -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
